<template>
	<view class="sj">
		<!-- 申请原因 -->
		<view class="spj">

			<view class="le">
				<image src="/static/tp.png" mode=""></image>
			</view>
			<view class="ri">
				<text class="rc">日常保洁=油烟机清洗+房屋打扫</text>
				<text class="qj">3小时清洁，深度打扫，干净舒适之后红红的哦啊hi哦的</text>
			</view>
		</view>
		<!-- 类型 -->
		<view class="qi">
			<view class="shenq">
				<text class="lx">申请类型</text>
				<text class="lxx">我要退服务</text>
			</view>
			<view class="yy">
				<text class="yys">申请原因</text>
				<text class="yyy" @click="wt" :style="{
					'color':xValue=='点击选择申请原因' ?'#bebebe':'#000000' }">{{xValue}}</text>
				<u--textarea v-if="xValue=='其他'" v-model="value1" placeholder="请您详细填写申请说明" count></u--textarea>
				<u-popup :show="show" :round="10" mode="bottom" @close="close" @open="open">
					<view class="yuan">
						<text class="yu">请输入您的原因？</text>
						<view class="xxb">
							<u-radio-group v-model="radiovalue1" placement="column" @change="groupChange">
								<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1"
									:key="index" :label="item.name" :name="item.name" @change="radioChange">
								</u-radio>
							</u-radio-group>
						</view>

					</view>
				</u-popup>
			</view>
		</view>
		<!-- 金额 -->
		<view class="je">
			<view class="le">
				<text class="sqj">申请金额</text>

			</view>
			<view class="ri">
				<text class="jee">￥{{valueje}}</text>
				<view class="sis" @click="xgje">
					<image src="/static/修改.png" mode=""></image>
					<text>修改金额</text>
				</view>

			</view>
			<u-modal :show="showje" :title="title" @confirm="qre">
				<view class="slot-content">
					 <u--input
					    placeholder="请输入金额"
					    border="surround"
					    v-model="valueje"
					    @change="change"
					  ></u--input>
				</view>
			</u-modal>
		</view>
		<!-- 说明 -->
		<view class="sqsm">
			<text class="sm">申请说明</text>
			<u--textarea v-model="value2" placeholder="请您详细填写申请说明" count></u--textarea>

			<view class="imag">

				<u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="4" multiple
					:maxCount="3"></u-upload>
			</view>




		</view>
		<view class="phone">
			<!-- 设置一个表单验证 -->
			<text>联系电话</text>

			<u--input placeholder="请输入电话" border="surround" clearable></u--input>


		</view>
		<view class="btnn">
			<u-button type="primary" color="#ee7900" text="提交申请"></u-button>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				showje: false,
				title: '金额',
				value1: '',
				value2: '统计字数',
				fileList3: [],
				show: false,
				radiolist1: [{
						name: '不想要了',
						disabled: false
					},
					{
						name: '服务态度不好',
						disabled: false
					},
					{
						name: '服务质量差',
						disabled: false
					},
					{
						name: '其他',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: '',
				xValue: '点击选择申请原因',
				valueje:'23.0'
			}
		},
		methods: {
			groupChange(n) {
				// console.log('groupChange', n);

			},
			radioChange(n) {
				// console.log('radioChange', n);
				this.xValue = n
				this.show = false
			},
			afterRead(e) {
				console.log(e.file);
				this.fileList3.push(e.file[0])
			},
			wt() {
				this.show = true
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			xgje() {
				// 修改金额
				this.showje = true
			},
			qre(){
				
				this.showje = false
			},change(e){
				this.valueje=e
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #cef4f2;
	}

	.sj {
		margin: 8px;
		padding: 4px;

		.spj {
			display: flex;
			// justify-content: space-around;
			background-color: #ffffff;
			border-radius: 8px;
			padding: 8px;

			.le {
				image {
					width: 55px;
					height: 55px;
				}
			}

			.ri {
				display: flex;
				flex-direction: column; //注意在使用的时候
				// align-items: center;
				margin-left: 15px;

				.rc {
					color: #6a6a6a;
				}

				.qj {
					margin-top: 7px;
					font-size: 14px;
					color: #6a6a6a;
					// background-color: #136a64;
					width: 160px;
					white-space: nowrap; //注意弹性布局之后似乎生效
					/* 禁止换行 */
					overflow: hidden;
					/* 超出部分隐藏 */
					text-overflow: ellipsis;
					/* 超出部分显示省略号 */
				}

			}
		}

		.qi {
			margin-top: 8px;
			background-color: #ffffff;
			border-radius: 8px;
			padding: 7px;

			.shenq {
				display: flex;

				.lx {
					font-size: 16px;
					font-weight: bold;
					color: #6b6b6b;
				}

				.lxx {
					margin-left: 14px;
				}
			}

			.yy {
				margin-top: 7px;

				.yys {
					font-size: 16px;
					font-weight: bold;
					color: #6b6b6b;
				}

				.yyy {
					margin-left: 14px;
					// color: #bebebe;

				}

				.yuan {
					padding: 12px;

					.yu {
						margin-bottom: 8px;
					}

					.xxb {
						margin-top: 8px;
					}
				}
			}
		}

		.je {
			margin-top: 8px;
			background-color: #ffffff;
			border-radius: 8px;
			padding: 7px;

			.le {
				.sqj {
					font-size: 16px;
					font-weight: bold;
					color: #6b6b6b;
				}
			}

			.ri {
				display: flex;
				justify-content: space-between;

				.jee {
					font-weight: bold;
					font-size: 18px;
					margin-top: 5px;
				}

				.sis {
					display: flex;

					align-items: center;

					image {
						width: 18px;
						height: 18px;
						margin-right: 4px;
					}

					text {
						font-size: 13px;
						font-weight: bold;
						color: #afafaf;
					}
				}

			}
		}

		.sqsm {
			background-color: #ffffff;
			border-radius: 8px;
			padding: 7px;
			margin-top: 8px;

			.sm {
				font-size: 16px;
				font-weight: bold;
				color: #6b6b6b;
			}

			.imag {
				margin-top: 10px;
			}
		}

		.phone {
			background-color: #ffffff;
			border-radius: 8px;
			padding: 7px;
			margin-top: 8px;
			display: flex;
			align-items: center;

			text {
				margin-right: 7px;
			}

			.dh {}
		}

		.btnn {
			margin-top: 8px;
		}
	}
</style>